<template>
  <div ref="time_ech" class="time-ech" style="width: 100%; min-height: 100%" />
</template>

<script>
import * as echarts from 'echarts'
import ResizeObserver from 'resize-observer-polyfill'
import { getThemeValue } from '@/utils/theme_color.js'
import { mapState } from 'vuex'

export default {
  props: {
    axisData: {
      type: Object,
      default: () => {}
    },
    daysData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chartInstance: null,
      hours: ['12a', '2a', '4a', '6a', '8a', '10a', '12p', '2p', '4p', '6p', '8p', '10p'],

      option: {
        animation: false,
        grid: {
          top: '0%',
          left: '3%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        // tooltip: {
        //   trigger: "axis",
        //   textStyle: {
        //     align: "left",

        //   },
        //   axisPointer: {
        //     type: "none",
        //     label: {
        //       backgroundColor: "#6a7985",
        //     },
        //   },
        // },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: ['12a', '2a', '4a', '6a', '8a', '10a', '12p', '2p', '4p', '6p', '8p', '10p']
        },
        yAxis: {
          type: 'category',
          data: this.daysData.yAxisArr,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        visualMap: {
          min: 0,
          max: 10,
          inRange: {
            color: ['rgba(0,0,0,0)', '#c6e48b', '#7bc96f', '#239a3b', '#196027']
          },
          show: false
        },
        dataZoom: [
          {
            type: 'slider',
            show: this.daysData.dataArr.length > 10,
            // 设置组件控制的y轴
            yAxisIndex: 0,
            left: 10,
            top: 100,
            bottom: 10,
            width: 10,
            startValue: 0,
            endValue: 7,
            borderRadius: 5,
            fillerColor: '#4B6EEF', // 滑动块的颜色
            backgroundColor: '#ffffff', // 两边未选中的滑动条区域的颜色
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 控制手柄的尺寸
            handleSize: 15,
            // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
            showDataShadow: false
          },
          {
            type: 'inside',
            yAxisIndex: [0],

            // 不按任何功能键，鼠标滚轮能触发缩放
            zoomOnMouseWheel: false,
            // 不按任何功能键，鼠标移动能触发数据窗口平移
            moveOnMouseWheel: false
          }
        ],
        series: [
          {
            type: 'heatmap',
            data: this.daysData.dataArr,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#000'
                }
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      sideTheme: state => state.settings.sideTheme
    })
  },
  watch: {
    sideTheme: {
      handler(newValue) {
        setTimeout(() => {
          this.updateChart()
        }, 500)
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.initChart()
    this.updateChart()
    const resizeOb = new ResizeObserver((entries) => {
      for (const entry of entries) {
        echarts.getInstanceByDom(entry.target)?.resize()
      }
    })
    resizeOb.observe(this.$refs.time_ech)
    // 添加随页面变化而变化
  },
  destroyed() {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.time_ech)
      this.chartInstance.setOption(this.option)
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    getData(value) {
      const series = [
        {
          type: 'heatmap',
          data: value.dataArr,
          label: {
            normal: {
              show: true
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
      this.option.dataZoom[0].show = value.dataArr.length > 7
      this.option.yAxis.data = value.yAxisArr
      this.option.series = series
      this.chartInstance.setOption(this.option)

      this.updateChart()
    },
    updateChart() {
      const titleThemeDark = getThemeValue('titleThemeDark')

      const DarkThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeDark.titleColor || '#333'
          }
        },
        legend: {
          textStyle: {
            color: titleThemeDark.titleColor || '#333'
          }
        },
        xAxis: {
          axisLabel: {
            color: '#fff'
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.15)'
            }
          },
          axisLine: {
            show: false
          }
        },
        series: [{
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          }
        }]
      }
      const titleThemeHigh = getThemeValue('titleThemeHigh')
      const HighThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeHigh.titleColor
          }
        },
        legend: {
          textStyle: {
            color: titleThemeHigh.titleColor
          }
        },
        xAxis: {
          axisLabel: {
            color: '#606266'
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: '#606266'
          },
          axisLine: {
            show: false
          }
        },
        series: [{
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#000'
              }
            }
          }
        }]
      }
      if (this.sideTheme === 'theme-dark' || this.sideTheme === 'tech') {
        this.chartInstance.setOption(DarkThemeStyle)
      } else {
        this.chartInstance.setOption(HighThemeStyle)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.time-ech {
  width: 100%;
  height: 100%;
}
</style>
